<template>
  <l-panel style="padding: 0">
    <template #toolLeft>
      <l-query2
        :labelWidth="0"
        :popoverWidth="240"
        :items="queryItems"
        :formData="queryData"
        :loading="tableLoading"
        @search="handleSearch"
      >
        <template #keyWord>
          <el-input v-model="queryData.keyWord" :placeholder="$t('请输入查询关键字')"></el-input>
        </template>
        <template #seachDate>
          <l-date
            format="yyyy-MM-dd"
            dateType="daterange"
            v-model="queryData.seachDate"
            startPlaceholder="开始时间"
            endPlaceholder="结束时间"
          >
          </l-date>
        </template>
      </l-query2>
    </template>
    <template #toolRight>
      <l-tool-btns :hasAdd="false"> </l-tool-btns>
    </template>
    <l-table
      ref="mainTable"
      :loading="tableLoading"
      :columns="columns"
      :dataSource="tableData"
      :isPage="true"
      :pageTotal="tableTotal"
      :tablePage.sync="tableCurrentPage"
      @loadPageData="turnTablePage"
    >
      <template v-slot:f_UnitName="scope">
        <el-button @click="handleAudit(scope.row)" size="mini" type="text">{{ scope.row.f_UnitName }}</el-button>
      </template>

      <template v-slot:f_IsUrge="scope">
        <el-tag v-if="scope.row.f_IsUrge == 1" size="mini" type="danger">催办</el-tag>
        <el-tag v-else size="mini" type="success">正常</el-tag>
      </template>
      <template v-slot:f_CreateDate="scope">
        {{ lr_dateFormat(scope.row.f_CreateDate) }}
      </template>
    </l-table>

    <audit-form
      ref="form"
      type="audit"
      :isCreateAgain="isCreateAgain"
      :params="{ taskId: taskId }"
      :isLoadFormData="true"
      :title="title"
      :visible.sync="visible"
      @refresh="loadTableData(true)"
    ></audit-form>
  </l-panel>
</template>

<script>
const api = window.$api.workflow.process;
import AuditForm from "./process/audit";
export default {
  components: {
    AuditForm,
  },
  data() {
    return {
      queryItems: [
        { prop: "seachDate", span: 24 },
        { prop: "keyWord", span: 24 },
      ],
      queryData: {
        keyWord: "",
        seachDate: "",
      },
      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        { label: "任务", prop: "f_UnitName", minWidth: 100, align: "left" },
        { label: "标题", prop: "f_ProcessTitle", minWidth: 100, align: "left" },
        { label: "状态", prop: "f_IsUrge", width: 60, align: "center" },
        { label: "提交人", prop: "f_ProcessUserName", width: 100, align: "left" },
        { label: "时间", prop: "f_CreateDate", width: 160, align: "left" },
      ],

      taskId: "",
      title: "",
      visible: false,
      isCreateAgain: false,
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();
    },
    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      const queryData = this.$deepClone(this.queryData);

      if (queryData.seachDate) {
        const dateList = queryData.seachDate.split(" - ");
        queryData.startDate = dateList[0];
        queryData.endDate = dateList[1];
        queryData.seachDate = null;
      }

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "F_CreateDate DESC";
      let data = await this.$awaitWraper(api.getDelegateMyPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },
    handleAudit(row) {
      this.isCreateAgain = row.f_Type == 4 ? true : false;
      this.taskId = row.f_Id;
      this.title = `${row.f_ProcessTitle}【${row.f_UnitName}】`;
      this.visible = true;
    },

    async handleOpened() {
      const data = await this.$awaitWraper(api.get(this.taskId));
      if (data) {
        //console.log(data)
        //this.$refs.form.setForm(data)
      }
      this.dialogLoading = false;
    },
    handleClosed() {},
  },
};
</script>
